<template>
  <div>
    <el-form ref="formData" :model="formData" size="small" label-width="80px">
      <el-form-item prop="planName" label="计划标识">
        <el-input v-model="formData.planName" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accountId" label="账号" label-width="60px">
        <el-select v-model="formData.accountId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in accountList"
            :key="item.sellerId"
            :label="item.sellerName"
            :value="item.sellerId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="siteId" label="站点" label-width="60px">
        <el-select v-model="formData.siteId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in countryList"
            :key="item.countryId"
            :label="item.alphaCode"
            :value="item.countryId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品编码" style="width:300px">
        <el-row>
          <el-col :span="10">
            <el-select v-model="formData.type" clearable placeholder="请选择">
              <el-option label="ASIN" value="asin"></el-option>
              <el-option label="SKU" value="sku"></el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
            <el-input v-model="formData.sku" clearable v-if="formData.type === 'sku'"></el-input>
            <el-input v-model="formData.asin" clearable v-else></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="status" label="状态" label-width="60px">
        <el-select v-model="formData.status" filterable clearable placeholder="请选择">
          <el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="primary" @click="getData" icon="el-icon-search">搜索</el-button>
        <el-button @click="resetForm('formData')" icon="el-icon-circle-close">清空</el-button>
        <el-button
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="$refs.plan.show()"
          v-if="addEnable"
        >新增</el-button>
      </el-form-item>
      <el-form-item label-width="0" style="float: right;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="formData.pageSize"
          @current-change="current"
          :total="formData.total"
        ></el-pagination>
      </el-form-item>
    </el-form>

    <el-table
      ref="table"
      :data="tableData"
      v-loading="loading"
      border
      :header-cell-style="getRowClass"
      style="width: 100%"
    >
      <el-table-column prop="planName" label="计划标识" width="150"></el-table-column>
      <el-table-column prop="accountId" label="账号信息" width="150">
        <template slot-scope="scope">
          <el-row>
            <el-col
              :span="24"
              v-if="scope.row.amzRegionId"
            >区域：{{amzRegionList.find(item => item.amazonRegionId === scope.row.amzRegionId).amzRegionCode}}</el-col>
            <el-col
              :span="24"
              v-if="scope.row.siteId"
            >站点：{{countryList.find(item => item.countryId === scope.row.siteId).alphaCode}}</el-col>
            <el-col
              :span="24"
              v-if="scope.row.accountId"
            >账号：{{accountList.find(item => item.sellerId === scope.row.accountId).sellerName}}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="sku" label="产品编码" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.asin">
            ASIN:
            <el-popover placement="top-start" title="ASIN" trigger="hover">
              <p v-for="(item,key) in scope.row.asin.split(/[(\r\n)\r\n]+/)" :key="key">{{item}}</p>
              <div slot="reference">
                <el-row v-for="(item,index) in scope.row.asin.split(/[(\r\n)\r\n]+/)" :key="index">
                  <el-col :span="24" v-if="index < 2">{{item}}</el-col>
                  <span v-if="index === 1">...</span>
                </el-row>
              </div>
            </el-popover>
          </div>
          <div v-else>
            SKU:
            <el-popover placement="top-start" title="SKU" trigger="hover">
              <p v-for="(item,key) in scope.row.sku.split(/[(\r\n)\r\n]+/)" :key="key">{{item}}</p>
              <div slot="reference">
                <el-row v-for="(item,index) in scope.row.sku.split(/[(\r\n)\r\n]+/)" :key="index">
                  <el-col :span="24" v-if="index < 2">{{item}}</el-col>
                  <span v-if="index === 1">...</span>
                </el-row>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderId" label="排除OrderId" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.orderId">
            <el-popover placement="top-start" title="排除OrderId" trigger="hover">
              <p v-for="(item,key) in scope.row.orderId.split(/[(\r\n)\r\n]+/)" :key="key">{{item}}</p>
              <div slot="reference">
                <el-row
                  v-for="(item,index) in scope.row.orderId.split(/[(\r\n)\r\n]+/)"
                  :key="index"
                >
                  <el-col :span="24" v-if="index < 2">{{item}}</el-col>
                  <span v-if="index === 1">...</span>
                </el-row>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="timeInterval" label="执行时间间隔" width="105"></el-table-column>
      <el-table-column prop="clickQuantity" label="点击数量" width="80"></el-table-column>
      <el-table-column label="日期" width="280px">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="10">下单后时间范围：</el-col>
            <el-col
              :span="14"
            >{{scope.row.orderTimeStart | formatDate}} ~ {{scope.row.orderTimeEnd | formatDate}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="10">计划时间：</el-col>
            <el-col
              :span="14"
            >{{scope.row.planTimeStart | formatDate}} ~ {{scope.row.planTimeEnd | formatDate}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="10">执行时间范围：</el-col>
            <el-col :span="14">{{scope.row.rangeEnd }} ~ {{scope.row.rangeStart }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="planStatus" label="状态">
        <template slot-scope="scope">
          <div
            v-if="scope.row.planStatus"
          >{{statusList.find(item => item.id === scope.row.planStatus).label}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        :width="((addEnable?80:0) +  (checkPwdEnabel?80:0) + 100)+'px'"
      >
        <template slot-scope="scope">
          <div>
            <el-button
              type="success"
              size="mini"
              @click="$router.push({name:'reviewPlanDetails',query: scope.row})"
            >查看详情</el-button>
            <el-button
              type="warning"
              size="mini"
              v-if="checkPwdEnabel && scope.row.planStatus === 1"
              @click="$router.push({name:'reviewPlanDetails',query: {Check:true,...scope.row}})"
            >审核</el-button>
            <el-button 
              type="primary"
              @click="$refs.plan.edit(scope.row)"
              size="mini"
              v-if="addEnable"
              :disabled="scope.row.planStatus !== 1"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini" 
              @click="Delete(scope.row.planId)"
              v-if="checkPwdEnabel && scope.row.planStatus !== 1"
              :disabled="scope.row.planStatus === 7 ||  scope.row.planStatus === 6"
            >停止</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <scrollTable ref="scrollTable"></scrollTable>
    <plan-modal
      ref="plan"
      @load="getData"
      :accountList="accountList"
      :countryList="countryList"
      :amzRegionList="amzRegionList"
    ></plan-modal>
  </div>
</template>
<script>
import planModal from "./planModal";
import { reviewplanList, deleteReviewplan } from "@/api/reviewPlanController";
import { formatDate } from "assets/js/date";
import { AmazonAccount, Country, RegionQuery } from "@/api/common";
import scrollTable from "components/scroll/scroll-table.vue";
import { checkPermission } from "@/utils/permissions";
export default {
  components: {
    planModal,
    scrollTable,
  },
  data() {
    return {
      formData: {
        pageNum: 1,
        pageSize: 10,
        total: 1,
        accountId: "",
        asin: "",
        siteId: "",
        sku: "",
        type: "asin",
      },
      tableData: [],
      loading: true,
      accountList: [],
      countryList: [],
      amzRegionList: [],
      statusList: [
        {
          label: "已创建待审核",
          id: 1,
        },
        {
          label: "已审核待执行",
          id: 2,
        },
        {
          label: "正在执行",
          id: 3,
        },
        {
          label: "已完成",
          id: 4,
        },
        {
          label: "执行错误",
          id: 5,
        },
        {
          label: "未通过审核",
          id: 6,
        },
        {
          label: "已停止计划",
          id: 7,
        },
      ],
      addEnable: checkPermission("system:plan:add"),
      editEnabel: checkPermission("system:plan:edit"),
      checkPwdEnabel: checkPermission("system:plan:check"),
    };
  },
  created() {
    this.getData();
    this.getAccount();
    this.getCountry();
    this.getRegionQuery();
  },
  filters: {
    formatDate(time) {
      if (time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
      }
    },
  },
  methods: {
    getData() {
      this.loading = true;
      if (this.formData.type == "asin") {
        this.formData.sku = "";
      } else {
        this.formData.asin = "";
      }
      reviewplanList(this.formData).then((res) => {
        this.loading = false;
        this.formData.total = res.data.data.total;
        this.tableData = res.data.data.rows;
        this.$refs.scrollTable.scrollShow(this.$refs.table);
      });
    },
    getAccount() {
      AmazonAccount().then((res) => {
        this.accountList = res.data.data.data;
      });
    },
    getCountry() {
      Country().then((res) => {
        this.countryList = res.data.data.Country;
      });
    },
    getRegionQuery() {
      RegionQuery().then((res) => {
        this.amzRegionList = res.data.data.data;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getData();
    },
    Delete(id) {
      this.$confirm("此操作将停止邀评计划, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteReviewplan({ id: id }).then((res) => {
            if (res.data.code === this.ERR_OK) {
              this.getData();
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    current(pageNum) {
      this.formData.pageNum = pageNum;
      this.getData();
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  margin-top: 15px;
}
.el-form-item {
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}
</style>